<template>
	<u-navbar :autoBack="true" title="修改密码"></u-navbar>
	<view class="wrap">
		<view class="remind-text">请设置登录密码</view>
		<view class="tip">定期更新密码提高安全性</view>
		<u-form class="form" :model="model" :rules="rules" ref="uForm" labelPosition="top">
			<u-form-item label="旧密码" prop="oldPassword" label-width="150" :borderBottom="true">
				<u-input type="password" v-model="model.oldPassword" placeholder="请输入旧密码" border="none"></u-input>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" label-width="150" :borderBottom="true">
				<u-input type="password" v-model="model.newPassword" placeholder="请输入新密码" border="none"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmPassword" label-width="150" :borderBottom="true">
				<u-input type="password" v-model="model.confirmPassword" placeholder="请确认新密码" border="none"></u-input>
			</u-form-item>
		</u-form>
		<view class="info">
			<view class="dot"></view>
			<view>密码必须是8-16位的数字，字符组合（不能是纯数字）</view>
		</view>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
			<!-- <u-button class="btn" type="default" @click="cancel">关闭</u-button> -->
		</view>
	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	import baseApi from '@/apis/cloud/base.js';
	export default {
		data() {
			return {
				model: {
					oldPassword: '',
					newPassword: '',
					confirmNewPassword: ''
				},
				worker_id: null,
				rules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['change', 'blur'],
					}],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					confirmPassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.newPassword;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				}
			};
		},
		onLoad(option) {
			this.worker_id = option.workerId;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async submit() {
				var flag = false;
				// this.$refs.uForm.validate(valid => {
				// 	flag = true;
				// });
				await this.$refs.uForm.validate().then(res => {
					flag = true;
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
				if (flag) {
					const res = await baseApi.updatePWD({
						worker_id: this.worker_id,
						new_pwd: this.model.newPassword
					});
					if (res.status == 1) {
						uni.showModal({
							title: '提示',
							content: "修改密码成功,需重新登录",
							showCancel: false,
							success: function() {
								uni.redirectTo({
									url: '/pages/user/login'
								});								
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: "修改密码失败,请联系管理员",
							showCancel: false
						});
					}
					// this.$u.api.user.infoSavePwd({
					// 	oldPassword: this.model.oldPassword,
					// 	newPassword: this.model.newPassword
					// }).then(res => {
					// 	if(res.code == '200'){
					// 		uni.showModal({
					// 			title: '提示',
					// 			content: res.msg,
					// 			showCancel: false,
					// 			success: function () {
					// 				uni.navigateBack();
					// 			}
					// 		});
					// 	}else{
					// 		uni.showModal({
					// 			title: '提示',
					// 			content: res.msg,
					// 			showCancel: false
					// 		});
					// 	}
					// });

				}
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss">
	.wrap {
		//background: #F3F4F5;
		height: calc(100vh - 88rpx - var(--status-bar-height));
		padding: 0 30rpx;
		padding-top: calc(88rpx + var(--status-bar-height));
		overflow-y: scroll;
	}

	.u-form {
		//background: #fff;
	}

	.remind-text {
		font-size: 38rpx;
		font-weight: bold;
		margin-top: 60rpx;
		letter-spacing: 2rpx;
	}

	.tip {
		color: #aaa;
		font-size: 28rpx;
		padding: 20rpx 0;
		letter-spacing: 2rpx;
		margin-bottom: 40rpx;
	}

	.info {
		display: flex;
		align-items: center;
		color: #aaa;
		padding: 60rpx 0;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #fa3534;
		margin-right: 20rpx;
		align-self: flex-start;
		margin-top: 12rpx;
	}
</style>